<template>
  <div class="login"><img class="login-bg-el" src="@/assets/images/login_bg_el.png">
    <div class="title">诺维塔仓库管理后台</div>
    <div class="form-container">
      <div class="form-sub-title">
        <div class="sub-title">用户登录</div>
      </div>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" class="input-item" type="text" auto-complete="off"
                    placeholder="请输入账号">
            <img slot="prefix" class="input-icon" src="@/assets/images/login_form_icon_user.png"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" class="input-item" type="password" auto-complete="off"
                    placeholder="请输入密码" @keyup.enter.native="handleLogin">
            <img slot="prefix" class="input-icon" src="@/assets/images/login_form_icon_pw.png">
          </el-input>
        </el-form-item>
        <el-form-item v-if="captchaOnOff" prop="code">
          <div class="captcha-container">
            <el-input v-model="loginForm.code" class="input-item code-input" auto-complete="off"
                      placeholder="请输入验证码" @keyup.enter.native="handleLogin">
              <img slot="prefix" class="input-icon" src="@/assets/images/login_form_icon_captcha.png">
            </el-input>
            <div class="captcha-code"><img :src="codeUrl" class="captcha-code-img" @click="getCode"></div>
          </div>
        </el-form-item>
        <div class="login-btn" @click.prevent="() => !loading && handleLogin()">
          <span v-if="!loading">登 录</span> <span v-else>登 录 中...</span></div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {encrypt} from '@/utils/jsencrypt';
import {getCodeImg} from '@/api/login';

export default {
  name: 'Login',
  data() {
    return {
      codeUrl: '',
      loginForm: {
        username: '',
        password: '',
        code: '',
        uuid: ''
      },
      loginRules: {
        username: [
          {required: true, trigger: 'blur', message: '请输入您的账号'}
        ],
        password: [
          {required: true, trigger: 'blur', message: '请输入您的密码'}
        ],
        code: [{required: true, trigger: 'change', message: '请输入验证码'}]
      },
      loading: false,
      // 验证码开关
      captchaOnOff: true,
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    this.getCode();
  },
  methods: {
    // 获取验证码
    getCode() {
      getCodeImg().then((res) => {
        this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
        //console.log(this.captchaOnOff)
        if (this.captchaOnOff) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },

    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          const params = {
            ...this.loginForm,
            isAdmin: this.loginForm.username === 'admin',
            // username: this.loginForm.username.trim(),
            // password: this.loginForm.password.trim()
            //password: encrypt(this.loginForm.password.trim())
          };
          this.$store.dispatch('Login', params).then(() => {
            this.$router.push({path: this.redirect || '/'}).catch(() => {
            });
          }).catch(() => {
            this.loading = false;
            if (this.captchaOnOff) {
              this.getCode();
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("~@/assets/images/login_background.jpg");
  background-size: cover;
  background-size: 100% 100%;
  position: relative;
}

.login-bg-el {
  position: absolute;
  width: 814px;
  top: 35%;
  // top: 368px;
  left: 185px;
}

.title {
  position: absolute;
  font-weight: 700;
  line-height: 57px;
  font-size: 60px;
  left: 185px;
  // top: 206px;
  top: 20%;
  color: #547bd5;
}

.form-container {
  position: absolute;
  top: 23%;
  right: 231px;
  width: 560px;
  // height: 600px;
  border-radius: 16px;
  background-color: #fff;
  padding: 62px 52px 29px 52px;
}

.form-sub-title {
  display: flex;
  margin-bottom: 39px;

  .sub-title {
    font-weight: 700;
    line-height: 34px;
    font-size: 36px;
    color: #5497fc;
    padding-bottom: 19px;
    position: relative;

    &::after {
      position: absolute;
      content: "";
      left: 0;
      bottom: 0;
      width: 52%;
      height: 6px;
      background-color: #5497fc;
      border-radius: 6px;
    }
  }
}

.login-form {
  ::v-deep .el-form-item {
    margin-bottom: 39px;
  }

  ::v-deep .input-item {
    .el-input__inner {
      height: 60px;
      padding-left: 78px;
      font-size: 19px;
      border-color: #dddddd;
      color: #333333;
      border-radius: 10px;
    }

    .el-input__inner::-webkit-input-placeholder {
      color: #999999;
    }

    .el-input__prefix {
      width: 72px;
      left: 0;
      text-align: center;
      display: flex;
      align-content: center;
      justify-content: center;

      .input-icon {
        width: 22px;
        margin: auto 0;
      }
    }
  }
}

.captcha-container {
  display: flex;

  .code-input {
    flex: 1;
    margin-right: 14px;
  }

  .captcha-code {
    height: 60px;
    float: right;

    &-img {
      height: 100%;
      cursor: pointer;
      vertical-align: middle;
    }
  }
}

.login-btn {
  background-image: url("~@/assets/images/login_btn_bg.png");
  background-size: cover;
  background-size: 100% 100%;
  width: 418px;
  height: 114px;
  margin: 0 auto;
  text-align: center;
  line-height: 100px;
  padding-bottom: 11px;
  font-size: 24px;
  color: #ffffff;
  font-weight: 500;
  cursor: pointer;
}
</style>
